<template>
  <div>
    <div class="row minw100">
      <div class="col-md-12">
        <!-- BEGIN EXAMPLE TABLE PORTLET-->
        <div class="portlet box grey-cascade" style="margin-right: 0;">              
          <div class="portlet-body">
            <ul class="nav nav-tabs">
              <li>
                <router-link to="/xjrwglxx" tag="a">
                   任务基础信息
                </router-link>
              </li>
              <li class="active">
                <router-link to="/xjrwgljl" tag="a" class="">
                   任务相关记录
                </router-link>
              </li>
              <button class="right btn green">导出</button>
            </ul>
            <div class="row mr0 ">
              <div class="left statusDiv">
                <ul class="statusNav ">
                  <li class="active">
                    <span class="time">2017/09/11 15:00</span>
                    <span class="relative">
                      <span class="line"></span>
                      <span class="garden"></span>
                    </span>
                    <img src="../../../../../static/images/step1.png" alt="">  
                    <span class="name">创建任务</span>  
                  </li>
                  <li>
                    <span class="time">2017/09/11 15:00</span>
                    <span class="relative">
                      <span class="line"></span>
                      <span class="garden"></span>
                    </span>
                    <img src="../../../../../static/images/step2.png" alt="">  
                    <span class="name">创建任务</span>   
                  </li>
                  <li>
                    <span class="time">2017/09/11 15:00</span>
                    <span class="relative">
                      <span class="line"></span>
                      <span class="garden"></span>
                    </span>
                    <img src="../../../../../static/images/step3.png" alt="">   
                    <span class="name">确认送达</span>  
                  </li>
                  <li>
                    <span class="time">2017/09/11 15:00</span>
                    <span class="relative">
                      <span class="line"></span>
                      <span class="garden"></span>
                    </span>
                    <img src="../../../../../static/images/step4.png" alt="">   
                    <span class="name">提交处理信息</span>  
                  </li>
                  <li>
                    <span class="time">2017/09/11 15:00</span>
                    <span class="relative">
                      <span class="line"></span>
                      <span class="garden"></span>
                    </span>
                    <img src="../../../../../static/images/step3.png" alt="">   
                    <span class="name">逾期推送</span>  
                  </li>
                  <li>
                    <span class="time">2017/09/11 15:00</span>
                    <span class="relative">
                      <span class="line"></span>
                      <span class="garden"></span>
                    </span>
                    <img src="../../../../../static/images/step4.png" alt="">   
                    <span class="name">提交处理信息</span>  
                  </li>
                  <li>
                    <span class="time">2017/09/11 15:00</span>
                    <span class="relative">
                      <span class="line"></span>
                      <span class="garden"></span>
                    </span>
                    <img src="../../../../../static/images/step5.png" alt="">   
                    <span class="name">检查不通过</span>  
                  </li>
                  <li class="on">
                    <span class="time">2017/09/11 15:00</span>
                    <span class="relative">
                      <span class="line"></span>
                      <span class="garden"></span>
                    </span>
                    <img src="../../../../../static/images/step6.png" alt="">    
                    <span class="name">创建整改任务</span>  
                  </li>
                  <li>
                    <span class="time">2017/09/11 15:00</span>
                    <span class="relative">
                      <span class="line"></span>
                      <span class="garden"></span>
                    </span>
                    <img src="../../../../../static/images/step3.png" alt="">   
                    <span class="name">确认送达</span>  
                  </li>
                  <li>
                    <span class="time">2017/09/11 15:00</span>
                    <span class="relative">
                      <span class="line"></span>
                      <span class="garden"></span>
                    </span>
                    <img src="../../../../../static/images/step4.png" alt="">  
                    <span class="name">提交整改信息</span>  
                  </li>
                  <li>
                    <span class="time">2017/09/11 15:00</span>
                    <span class="relative">
                      <span class="line"></span>
                      <span class="garden"></span>
                    </span>
                    <img src="../../../../../static/images/step5.png" alt="">   
                    <span class="name">检查通过</span>  
                  </li>
                  <li>
                    <span class="time">2017/09/11 15:00</span>
                    <span class="relative">
                      <span class="line"></span>
                      <span class="garden"></span>
                    </span>
                    <img src="../../../../../static/images/step7.png" alt="">   
                    <span class="name">归档</span>  
                  </li>
                </ul>
              </div>
              <div class="taskDiv right">
                <div class="row">
                  <div class="col-md-12">
                    
                    <div class="portlet box grey-cascade">
                      <div class="portlet-title">
                        <div class="caption">
                          <i class="fa fa-globe"></i>操作信息
                        </div>
                       <div class="cz">
                          <div class="el-table__expand-icon" 
                          :class="{'el-table__expand-icon--expanded':toggle}"
                          @click="toggleFun">
                            <i class="el-icon el-icon-arrow-right"></i>
                          </div>
                        </div>
                      </div>
                      <div class="portlet-body" :class="{'hide':toggle==false}">
                        <div class="row">
                          <div class="col-md-6 color">
                            <div class="col-md-3">
                              操作人员 :
                            </div>
                            <div class="col-md-9">
                              <input class="form-control" v-on:input = "inputFunc($event)" :readonly="is_modifly" v-model="cell_name" type="text">
                            </div>
                          </div>  
                          <div class="col-md-6 color">
                            <div class="col-md-3">
                              操作时间 :
                            </div>
                            <div class="col-md-9">
                              <input class="form-control" v-on:input = "inputFunc($event)" :readonly="is_modifly" v-model="cell_name" type="text">
                            </div>
                          </div>
                          <div class="col-md-6 color">
                            <div class="col-md-3">
                              处理动作 :
                            </div>
                            <div class="col-md-9">
                              <input class="form-control" v-on:input = "inputFunc($event)" :readonly="is_modifly" v-model="cell_name" type="text">
                            </div>
                          </div>
                          <div class="clearfix"></div>
                          <div class="col-md-6">
                            <div class="col-md-3" style="font-weight: 500;color: #666;">
                              处理描述 :
                            </div>
                            <div class="col-md-9" style="font-weight: 500;color: #333;">
                              <textarea v-model="extra_desc" class="form-control" rows="3" :readonly="is_modifly" style="resize: none;width: 95%;position: relative;"></textarea>
                            </div>
                          </div> 
                        </div>
                      </div>
                    </div>

                    <div class="portlet box grey-cascade">
                      <div class="portlet-title">
                        <div class="caption">
                          <i class="fa fa-globe"></i>任务信息
                          <span class="status">任务当前状态 : <span class="notDeal">未处理</span></span>
                        </div>
                       <div class="cz">
                          <div class="el-table__expand-icon" 
                          :class="{'el-table__expand-icon--expanded':toggle}"
                          @click="toggleFun">
                            <i class="el-icon el-icon-arrow-right"></i>
                          </div>
                        </div>
                      </div>
                      <div class="portlet-body" :class="{'hide':toggle==false}">
                        <div class="taskTitle">任务基础信息</div>
                        <div class="row">
                          <div class="col-md-6 color">
                            <div class="col-md-3">
                              所属计划 :
                            </div>
                            <div class="col-md-9">
                              <input class="form-control" v-on:input = "inputFunc($event)" :readonly="is_modifly" v-model="cell_name" type="text">
                            </div>
                          </div>
                          <div class="col-md-6 color">
                            <div class="col-md-3">
                              责任人 :
                            </div>
                            <div class="col-md-9">
                              <input class="form-control" v-on:input = "inputFunc($event)" :readonly="is_modifly" v-model="cell_name" type="text">
                            </div>
                          </div>
                          <div class="col-md-6 color">
                            <div class="col-md-3">
                              开始时间 :
                            </div>
                            <div class="col-md-9">
                              <input class="form-control" v-on:input = "inputFunc($event)" :readonly="is_modifly" v-model="cell_name"  type="text">
                            </div>
                          </div>
                          <div class="col-md-6 color">
                            <div class="col-md-3">
                              检查人 :
                            </div>
                            <div class="col-md-9">
                              <input class="form-control" v-on:input = "inputFunc($event)" :readonly="is_modifly" v-model="cell_name"  type="text">
                            </div>
                          </div> 
                          <div class="col-md-6 color">
                            <div class="col-md-3">
                              截止时间 :
                            </div>
                            <div class="col-md-9">
                              <input class="form-control" v-on:input = "inputFunc($event)" :readonly="is_modifly" v-model="cell_name"  type="text">
                            </div>
                          </div>
                          <div class="col-md-6 color">
                            <div class="col-md-3">
                              执行人 :
                            </div>
                            <div class="col-md-9">
                              <input class="form-control" v-on:input = "inputFunc($event)" :readonly="is_modifly" v-model="cell_name"  type="text">
                            </div>
                          </div>
                          <div class="col-md-6 color">
                            <div class="col-md-3">
                              完成时间 :
                            </div>
                            <div class="col-md-9">
                              <input class="form-control" v-on:input = "inputFunc($event)" :readonly="is_modifly" v-model="cell_name"  type="text">
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="portlet-body" :class="{'hide':toggle==false}" style="padding: 0 !important;">
                        <div class="taskTitle">
                          任务内执行项目信息
                          <div class="cz">
                            <div style="position: relative;top: 0px;" class="el-table__expand-icon" 
                            :class="{'el-table__expand-icon--expanded':toggle}"
                            @click="toggleFun">
                            <i class="el-icon el-icon-arrow-right"></i>
                          </div>
                        </div>
                        </div>
                        <div class="row color mbStyle">
                          <div class="col-md-3 mb10" style="padding-left: 0;">
                            <input type="text" class="form-control" placeholder="请输入关键字">
                          </div>
                          <div class="col-md-1 mb10">
                            <button class="btn green">查询 <i class="fa fa-search"></i></button>
                          </div>
                        </div>
                        <div class="tableDiv">
                          <table class="table table-striped table-bordered table-hover" style="color: #333;font-weight: 500;" id="sample_3">
                            <thead>
                              <tr>
                                <th>
                                   序号
                                </th>
                                <th>
                                   执行项目
                                </th>
                                <th>
                                   检查结论
                                </th>
                              </tr>
                            </thead>
                            <tbody>

                            <tr class="odd gradeX" v-for="(item,index) in list">
                              <td>
                                 {{(page_num-1)*page_size+index+1}}
                              </td>
                              <td>
                                  
                                <div>
                                  <div style="position: relative;top: -12px;left: 5px;" class="el-table__expand-icon left" 
                                  :class="{'el-table__expand-icon--expanded':toggle}"
                                  @click="toggleFun">
                                    <i class="el-icon el-icon-arrow-right"></i>
                                  </div>
                                  {{item.case_name}}
                                  <span class="right" v-if="item.status==0">正常</span>
                                  <span class="right" v-if="item.status==1">异常</span>
                                </div>
                                <div class="imgList">
                                  <div>
                                    处理信息 : {{item.description}} <br>
                                  </div>
                                  <div>
                                    图片信息 : <img v-for="(itemImg,index) in item.imgList" :src="itemImg" alt="">
                                  </div>
                                </div>
                              </td>
                              <td>
                                {{item.result}}
                              </td>
                            </tr>
                          
                            </tbody>
                          </table>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 选择部门开始 -->
    <div id="seDepart" class="modal fade" tabindex="-1" data-width="380">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
        <h4 class="modal-title">选择人员</h4>
      </div>
      <div class="modal-body">
        <div class="row m0 style auto">
          <div class="col-md-9">
            <input class="form-control w100" placeholder="关键字"  type="text">
          </div>
          <div class="col-md-3 mb10" style="margin-bottom: 15px;">
            <button class="btn green">查询</button>
          </div> 
          <div class="col-md-12">
            <el-radio-group v-model="radio">
              <el-radio v-for="(item,index) in people" :label="item.id">{{item.name}} {{item.phone}} {{item.job}}</el-radio>
            </el-radio-group>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn blue">提交</button>
        <button type="button" data-dismiss="modal" class="btn btn-default">关闭</button>
      </div>
    </div>              
    <!-- 选择部门结束 --> 
    
  </div>

</template>

<style scoped>
  .cz{float: right;width: auto;position: relative;top: 3px;left: 5px;}
    .row.center .col-md-3{text-align: center;margin-bottom: 10px;color: #666;font-weight: 500;}
    p {margin: 0 0 10px;}
    .row.center .col-md-6{text-align: left;margin-bottom: 10px;color: #666;font-weight: 500;}
    .row.center .col-md-6 input{border: 1px solid #dbdbdb;width: 50px;padding-left: 5px;color: #333;font-weight: 500;}
    table tr td{text-align: center;vertical-align: middle;}
    .search{margin: 0 0 10px;}
    .search .form-control{width: 100%;display: inline-block;}
    .search button{position: relative;color: #fff;}
    .imgDiv img{width: 100%;}
    .undefinedbootstrap_full_number{text-align: center;;}
    .pagination{display: inline-block;}
    .dataTotal{color: #666;font-weight: 500;position: relative;top: -20px;left: 10px;}
    .pagination li a,.pagination li a .fa{color: #666;font-weight: 500;}
    .pagination li.active a,.numData{color: #26a69a;font-weight: 500;}
    .numData{font-size: 16px;}
    .row.color span{color: #333;font-weight: 500;}
    .modal-body p{color: #333;font-size: 16px;font-weight: 500;}
    .row.m0{margin: 0;}
    .row.m10 .col-md-6 >div{margin-bottom: 10px;}
    .row.m10 .col-md-6 .col-md-3{position: relative;top: 6px;color: #333;font-weight: 500;}
    input.form-control,.bs-select.form-control{width: 95%;display: inline;}
    .col-md-9{color: #333;font-weight: 500;}
      .col-md-6.color{margin-bottom: 10px;}
    .modal-body p{color: #333;font-size: 16px;font-weight: 500;}
    .col-md-6.color .col-md-3{color: #666;font-weight: 500;position: relative;top: 5px;}
    .numData{font-size: 16px;}
    .col-md-12.color .col-md-3{margin-bottom: 10px;}
    .tree-view-item-key {
      font-size: 20px;
      color: black;
    }
    .portlet.box.grey-cascade {
        min-height: auto;
        border: 1px solid #dbdbdb;
        margin-right: 10px;
        margin-bottom: 10px;
    }
    .col-md-9{padding-left: 0;}
    input.form-control:focus,textarea.form-control:focus {
          border: 1px solid #e5e5e5;

      }
    .halo-tree{position: relative;}
    .deptDiv{position: absolute;left: 15px;right: 15px;top: 34px;z-index:100;background: #fff;border: 1px solid #dbdbdb;border-top:none;padding: 0 12px;}
    .focusNone{width: 1000px;margin: 0 auto;}
    input.form-control,.bs-select.form-control{width: 100%;}
    .el-radio{display: block;margin-left: 15px;margin-bottom: 10px;}
    .nav-tabs{margin-bottom: 0;}
    @media (max-width: 768px){
      .cz{margin-bottom: 0px;}
      .dataTotal{top: -5px;}
      .bs-select{width: 60%;}
    }

</style>
<style> 
   .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
  .taskDiv{overflow-y: auto;overflow-x: hidden;}
  .taskDiv>.row{min-height: 600px;}
</style>
<script>

  import '../../../../../static/global/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js';
  import Metronic from '../../../../../static/global/js/metronic.js'
  import {check,Tips} from '../../../../../static/js/pages/tips.js';
  import ComponentsPickers from '../../../../../static/js/pages/components-pickers.js';
  import optVue from '../../../../config/optVue.js';

  export default {
    data(){
      return{
        type:'',
        is_modifly:true,
        title:"",
        list:[],
        xqList:[
          {value:1,label:"片区1"},
          {value:1,label:"片区1"}
        ],
        area_id:-1,
        selectedXq:-1,

        mbList:[
          {value:1,label:"片区1"},
          {value:1,label:"片区1"}
        ],
        mb_id:-1,
        selectedMb:-1,

        dxList:[
          {value:1,label:"片区1"},
          {value:1,label:"片区1"}
        ],
        dx_id:-1,
        selectedDx:-1,

        zqList:[
          {value:1,label:"2017"},
          {value:1,label:"2018"}
        ],
        zq_id:-1,
        selectedZq:-1,
        radio:1,
        people:[
          {id:1,name:"张三",phone:"15111957698",job:"总经理"},
          {id:2,name:"张三",phone:"15111957698",job:"总经理"},
          {id:3,name:"张三",phone:"15111957698",job:"总经理"}
        ],
        is_disabled:false,
        toggle:true,
        
      }
    },
    components: {
        
    },
    mounted(){
      document.title = '模板任务计划管理';
      this.title = document.title;
      var that = this;
      optVue.wbrwgljc(this)
      $(function(){
        function heightAuto(){
          $(".statusDiv").height($(window).height()-173);
          $(".taskDiv").height($(window).height()-173);
          $(".statusNav").css({"minHeight":$(".statusDiv").height()})
          $(".taskDiv>.row").css({"minHeight":$(".statusDiv").height()})
        }
        heightAuto();
        $(window).on("resize",function(){
          heightAuto();
        })
      })
    },
    methods:{     
      
      toggleFun:function(){
        this.toggle = !this.toggle;
      },
      tableRowClassName(row, index) {
          //把每一行的索引放进row
          row.index = index
      },
      formatter(row, column ,cellValue) {
          //放回索引值
          // return (this.page_num-1)*this.page_size+row.index+1
          return row.index+1
      }, 
   
     
     

    }
    
  }   


</script>



